<!DOCTYPE html>
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('上报统计列表')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li hidden id="typeId">
                            <label for="type">条线选择：</label>
                            <select id="type" name="types" onchange="loadSelect(this.value)">
                                <option value="1,2,3">所有</option>
                                <option value="1,2">城市</option>
                                <option value="1,3">农村</option>
                            </select>
                        </li>
                        <li id="unit3Li" hidden>
                            <label for="unit3Select">三级单元：</label>
                            <select id="unit3Select" name="unit3Id" onchange="setNextUnitSelect(this.value,3)">
                                <option value="">所有</option>
                            </select>
                        </li>
                        <li id="unit4Li" hidden>
                            <label for="unit4Select">四级单元：</label>
                            <select id="unit4Select" name="unit4Id" onchange="setNextUnitSelect(this.value,4)">
                                <option value="">所有</option>
                            </select>
                        </li>
                        <li id="unit5Li">
                            <label for="unit5Select">包区名称：</label>
                            <select id="unit5Select" name="unit5Id" onchange="setSubordinateSelect(this.value,5)">
                                <option value="">所有</option>
                            </select>
                        </li>
                        <li>
                            <label>时间选择：</label>
                            <select id="periodSelect" name="period" onchange="checkTimeLi(this.value)">
                                <option value="1">昨日新增</option>
                                <option value="0">今日新增</option>
                                <option value="6">本周新增</option>
                                <option value="29">本月新增</option>
                                <option value="89">季度新增</option>
                                <option value="-1">自定义</option>
                            </select>
                        </li>
                        <li id="startTimeLi" style="display: none">
                            <label for="startTimeInput">
                                开始时间：
                            </label>
                            <input class="time-input" id="startTimeInput" name="startTime" placeholder="yyyy-MM-dd"
                                   type="text">
                        </li>
                        <li id="endTimeLi" style="display: none">
                            <label for="endTimeInput">
                                结束时间：
                            </label>
                            <input class="time-input" id="endTimeInput" name="endTime" placeholder="yyyy-MM-dd"
                                   type="text">
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm"
                               onclick="$.table.search()">
                                <i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-warning" onclick="$.table.exportExcel()"
               shiro:hasPermission="workbench:visit_log_statistics:export">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    let editFlag = [[${@permission.hasPermi('workbench:visit_log_statistics:edit')}]];
    let removeFlag = [[${@permission.hasPermi('workbench:visit_log_statistics:remove')}]];
    let prefix = ctx + "workbench/visit_log_statistics";

    $("input[name='startTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='endTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $(loadSelect('1,2,3'))

    /**
     * 加载选择器
     */
    function loadSelect(types) {
        $.ajax({
            method: 'post',
            url: '/workbench/leaf_unit_city/getMyDept',
            success: function (dept) {
                let level = dept.level;
                if (level !== 2) {
                    setPreviousUnitSelect(dept.parentId, level);
                }
                if (level <= 3) {
                    $("#typeId").show();
                }
                setCurrentSelect(dept, level);
                if (level <= 4) {
                    setNextUnitSelect(dept.deptId, level, types);
                } else {
                    setSubordinateSelect(dept.deptId, level)
                }
                //延时加载表格
                setTimeout(loadTable, 200);
            }
        })
    }

    /**
     * 加载表格
     */
    function loadTable() {
        let options = {
            url: prefix + "/list",
            exportUrl: prefix + "/export",
            modalName: "上报统计",
            pagination: false,
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'unitName',
                    title: '单元名称'
                },
                {
                    field: 'increaseCount',
                    title: '昨日新增',
                    formatter: function (value, row, index) {
                        let period = row.period
                        let tableHeader
                        if (period === 0) {
                            tableHeader = '今日新增'
                        } else if (period === 1) {
                            tableHeader = '昨日新增'
                        } else if (period === 6) {
                            tableHeader = '本周新增'
                        } else if (period === 29) {
                            tableHeader = '本月新增'
                        } else if (period === 89) {
                            tableHeader = '季度新增'
                        } else {
                            tableHeader = '周期新增'
                        }
                        //通过类名找到标签
                        let tableHeaderClassArray = document.getElementsByClassName("th-inner");
                        tableHeaderClassArray[2].innerText = tableHeader
                        tableHeaderClassArray[2].innerHtml = tableHeader
                        tableHeaderClassArray[2].innerHTML = tableHeader

                        $(tableHeaderClassArray[2]).selectpicker('refresh');
                        return value
                    }
                },
                {
                    field: 'ownNetUserCount',
                    title: '本网用户数量'
                },
                {
                    field: 'otherNetUserCount',
                    title: '异网用户数量'
                },
                {
                    field: 'potentialUserCount',
                    title: '潜在用户数量'
                },
                {
                    field: 'transformedCount',
                    title: '转化数量'
                },
                {
                    field: 'transformedRate',
                    title: '转化率'
                },
                {
                    field: 'principal',
                    title: '负责人'
                }]
        };
        $.table.init(options);
    }

    /**
     * 设置上级单元选择器
     * @param parentId 当前选择的项
     * @param currentLevel 单元等级
     */
    function setPreviousUnitSelect(parentId, currentLevel) {
        $.ajax({
            method: 'post',
            url: '/system/dept/selectByDeptId',
            data: {
                deptId: parentId
            },
            success: function (previousUnit) {
                let selectId
                let parentLevel = currentLevel - 1
                switch (parentLevel) {
                    case 5:
                        selectId = "#unit5Select"
                        setPreviousUnitSelect(previousUnit.parentId, parentLevel)
                        break
                    case 4:
                        selectId = "#unit4Select"
                        setPreviousUnitSelect(previousUnit.parentId, parentLevel)
                        break
                    case 3:
                        selectId = "#unit3Select"
                        break
                    case 2:
                        break
                    default:
                        alert("单元等级错误p：" + parentLevel)
                }
                let option = "<option value='" + previousUnit.deptId + "'>" + previousUnit.deptName + "</option>"
                $(selectId).html(option).selectpicker('refresh');
            }
        })
    }

    /**
     * 设置当前选择器的值
     */
    function setCurrentSelect(dept, level) {
        let selectId
        switch (level) {
            case 9:
                selectId = "#unit9Select"
                break
            case 8:
                selectId = "#unit8Select"
                break
            case 7:
                selectId = "#unit7Select"
                break
            case 6:
                selectId = "#unit6Select"
                break
            case 5:
                selectId = "#unit5Select"
                break
            case 4:
                selectId = "#unit4Select"
                break
            case 3:
                selectId = "#unit3Select"
                break
            case 2:
                break
            default:
                alert("单元等级错误c：" + level)
        }
        let options = "<option value='" + dept.deptId + "'>" + dept.deptName + "</option>";
        $(selectId).html(options).selectpicker('refresh');
    }

    /**
     * 设置下级单元选择器
     * @param deptId 本单元id
     * @param parentLevel 本单元等级
     * @param types types
     */
    function setNextUnitSelect(deptId, parentLevel, types) {
        let currentLevel = parentLevel + 1
        resetCurrentSelectOptions(currentLevel)
        $.ajax({
            method: 'post',
            url: '/system/dept/getChildrenDeptFilterByTypes',
            data: {
                deptId: deptId,
                types: types,
            },
            success: function (list) {
                let options = "<option value=\"\">所有</option>";
                for (let i = 0; i < list.length; i++) {
                    let option = list[i];
                    options += "<option value='" + option.deptId + "'>" + option.deptName + "</option>";
                }
                let selectId
                let liId
                let firstUnit = list[0]
                switch (currentLevel) {
                    case 5:
                        selectId = "#unit5Select"
                        // liId = "#unit5Li"
                        if (firstUnit !== undefined) {
                            setSubordinateSelect(list[0].deptId, currentLevel)
                        }
                        break
                    case 4:
                        selectId = "#unit4Select"
                        liId = "#unit4Li"
                        if (firstUnit !== undefined) {
                            setNextUnitSelect(list[0].deptId, currentLevel, types)
                        }
                        break
                    case 3:
                        selectId = "#unit3Select"
                        liId = "#unit3Li"
                        if (firstUnit !== undefined) {
                            setNextUnitSelect(list[0].deptId, currentLevel, types)
                        }
                        break
                    default:
                        alert("单元等级错误n：" + currentLevel)
                }
                $(selectId).html(options).selectpicker('refresh');
                if (liId !== '') {
                    $(liId).show();
                }
            }
        })
    }

    /**
     * 设置下属选择器
     * @param parentId parentId
     * @param parentLevel parentLevel
     * @param unit7Select unit7Select
     */
    function setSubordinateSelect(parentId, parentLevel, unit7Select) {
        let currentLevel = parentLevel + 1
        resetCurrentSelectOptions(currentLevel)
        $.ajax({
            method: 'post',
            url: '/workbench/leaf_unit_city/selectChildrenUnitByParentId',
            data: {
                parentId: parentId,
                currentLevel: currentLevel
            },
            success: function (list) {
                let options = "<option value=\"\">所有</option>"
                for (let i = 0; i < list.length; i++) {
                    let option = list[i];
                    options += "<option unit7Type=" + option.unit7Type + " value='" + option.id + "'>" + option.name + "</option>";
                }
                let unitSelect
                let firstItem = list[0]
                switch (currentLevel) {
                    case 6:
                        unitSelect = '#unit6Select'
                        if (firstItem !== undefined) {
                            setSubordinateSelect(firstItem.id, currentLevel);
                        } else {
                            $('#unit7Select').html(options).selectpicker('refresh');
                        }
                        break
                    case 7:
                        unitSelect = '#unit7Select';
                        if (firstItem !== undefined) {
                            setSubordinateSelect(firstItem.id, currentLevel, unitSelect)
                        } else {
                            $('#unit8Select').html(options).selectpicker('refresh');
                        }
                        break
                    case 8:
                        if (firstItem !== undefined) {
                            setSubordinateSelect(firstItem.id, currentLevel)
                        } else {
                            $('#unit9Select').html(options).selectpicker('refresh');
                        }
                        let unit7Type = $(unit7Select).find("option:selected").attr("unit7Type");
                        if (unit7Type === '0') {
                            $('#unit8Li').show()
                            $('#unit9Li').show()
                        } else {
                            $('#unit8Li').hide()
                            $('#unit9Li').hide()
                        }
                        unitSelect = '#unit8Select';
                        break
                    case 9:
                        unitSelect = '#unit9Select'
                        break
                    default:
                        console.log('ss' + currentLevel)
                        return
                }
                $(unitSelect).html(options).selectpicker('refresh');
            }
        })
    }

    /**
     * 设置选择器所有后，重置后续所有选择器未所有
     * @param level 单元等级
     */
    function resetCurrentSelectOptions(level) {
        let options = "<option value=\"\">所有</option>"
        switch (level) {
            case 3:
                $("#unit4Select").html(options).selectpicker('refresh')
                resetCurrentSelectOptions(4)
                break
            case 4:
                $("#unit5Select").html(options).selectpicker('refresh')
                resetCurrentSelectOptions(5)
                break
            case 5:
                $("#unit6Select").html(options).selectpicker('refresh')
                resetCurrentSelectOptions(6)
                break
        }
    }

    /**
     * 如果选择自定义,显示日期选择框,否则隐藏
     * @param value value
     */
    function checkTimeLi(value) {
        if (value === '-1') {
            $("#startTimeLi").show()
            $("#endTimeLi").show()
        } else {
            $("#startTimeLi").hide()
            $("#endTimeLi").hide()
        }
    }
</script>
</body>
</html>
